<template>
  <div>
    <div class="sort-head">
      <input type="search" placeholder="输入产品或品牌">
      <button type="button">搜索</button>
    </div>
    <div class="sx-top-search">
      <ul class="search-sort" ref="searchSort">
        <li class="active">白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <li>白酒</li>
        <!--<li v-for="(item,index) in categoryList" @click="queryGoods(item,index)" :class="{'active':index==currentIndex}">{{item.cateName}}</li>-->
      </ul>
    </div>
    <div class="content mb-50 bgf">
      <div class="main">
        <div class="left-menu-wrap" id="wrapper">
          <ul class="left-menu">
            <!--<li class="active">推荐分类</li>-->
            <li v-for="(item,index) in bigClassList" @click="changeClass(item,index)" :class="{'active':index==currentIndex}">{{item.cateName}}</li>

          </ul>
        </div>
        <div class="r-main">
          <ul class="paixu">
            <li>销量排序</li>
            <li>价格排序 <span class="icon-px">
              <img src="./images/order-down.svg"><img src="./images/order-up.svg">
              </span>
            </li>
          </ul>
          <ul class="sort-con">
            <router-link :to="{path:'/goodsdetail/',query:{id:1}}">
              <li>
                <div class="left-img"><img src="./images/sort-p.png" alt=""></div>
                <div class="pro-desc">
                  <h2>53°茅台王子酒茅台王子酒茅台王子酒</h2>
                  <p class="pt10"><span class="rule">规格：500ml</span></p>
                  <p class="pt10"><span class="price mr5">¥118.00</span>
                    <del>¥128</del>
                  </p>
                </div>
              </li>
            </router-link>
            <li>
              <div class="left-img"><img src="./images/sort-p.png" alt=""></div>
              <div class="pro-desc">
                <h2>53°茅台王子酒</h2>
                <p class="pt10"><span class="rule">规格：500ml</span></p>
                <p class="pt10"><span class="price mr5">¥118.00</span>
                  <del>¥128</del>
                </p>
              </div>
            </li>
            <!--<li v-for="item in smallClassList">-->
            <!--<router-link :to="{path:'/list/',query:{cateId:item.cateId}}">-->
            <!--<img :src="picUrl+item.filePath"> <span>{{item.cateName}}</span>-->
            <!--</router-link>-->
            <!--</li>-->
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  //  import getuser from '@/util/getuser'
  import config from '@/config/config'
  //  import {setCookie, getCookie} from '@/util/user'
  import BScroll from 'better-scroll'
  export default {
    components: {},
    data(){
      return {
        isShow: false,
        bigClassList: [],
        smallClassList: [],
        currentIndex: 0,
        showTip: false,
        secondAd: [],
        picUrl: config.picBaseUrl,
        upPicUrl: config.userBaseUrl,
        sortId: this.$route.query.cateId,

//        userId: getuser().userId,
        userId: 1039,
      }
    },
    mounted(){
      this.getBigClass()

      this.$nextTick(function () {
        let wrapper = document.querySelector('#wrapper')
        let scroll = new BScroll(wrapper, {click: true})
      })


    },
    methods: {

      changeClass(item, index){
        this.currentIndex = index
        this.getSmallClass(item.cateId)
        let wrapper = document.querySelector('#wrapper')
        wrapper.scrollTo(0, 0, 300)
      },
      getBigClass(){
        var loadindex = layer.open({type: 2, shadeClose: false});
        this.$http.get(config.baseUrl + '/search/category', {}, {
          headers: {},
          credientials: true,
          emulateJSON: true
        }).then(function (response) {
          layer.close(loadindex)
          if (response.data.code == 200) {
//            console.log(response.data.list);
            this.bigClassList = response.data.list
            if (this.sortId) {
              for (var i = 0, len = this.bigClassList.length; i < len; i++) {
                if (this.sortId == this.bigClassList[i].cateId) {
                  this.currentIndex = i
                }
              }
              this.getSmallClass(this.sortId)
            } else {
              this.getSmallClass(this.bigClassList[0].cateId)
            }

          }

        });
      },
      getSmallClass(parentId){
//        var loadindex = layer.open({type: 2, shadeClose: false});
        this.$http.get(config.baseUrl + '/search/categorySub', {
          params: {
            parentId: parentId,
          }
        }, {
          headers: {},
          credientials: true,
          emulateJSON: true
        }).then(function (response) {
//          layer.close(loadindex)
          if (response.data.code == 200) {
//            console.log(response.data.list);
            this.smallClassList = response.data.list
          }

        });
      }
    },
    filters: {},
  }
</script>


<style scoped>
  .content{
    padding-top:4.7rem;
    text-align:left;
  }
  .sort-head{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:100%;
    height:2.2rem;
    padding:.4rem .75rem;
    background:#fff;
    text-align:left;
    display:flex;
    border-bottom:1px solid #efefef;
  }
  .sort-head input{
    /*width:70%;*/
    background:#f6f6f6;
    border-radius:1rem;
    font-size:.6rem;
    color:#777777;
    border:0;
    padding:.3rem .75rem;
    flex:1;
  }
  .sort-head button{
    border:1px solid #efefef;
    padding:.25rem 1rem;
    border-radius:1rem;
    font-size:.65rem;
    color:#777777;
    text-align:center;
    background:none;
    margin-left:.5rem;
  }
  .sx-top-search{
    position:absolute;
    top:2.2rem;
    left:0;
    width:100%;
    height:2.5rem;
    z-index:9;
    overflow-y:hidden;
    overflow-x:scroll;
    border-bottom:1px solid #efefef;
    background:#fff;
    padding:.45rem .75rem 0;
  }
  .search-sort{
    background:#fff;
    overflow:hidden;
    width:5000px;
    height:2.5rem;
  }
  .search-sort li{
    float:left;
    font-size:.6rem;
    color:#777777;
    text-align:center;
    border-radius:1rem;
    padding:.25rem 1rem;
    border:1px solid #eeeeee;
    margin-right:.5rem;
  }
  .search-sort li.active{
    color:#fff;
    background:#e93b3d;
    border:0;
  }
  .main{
    display:flex;
    position:absolute;
    top:4.7rem;
    bottom:0;
    width:100%;
    overflow:hidden;
  }
  .left-menu-wrap{
    /*float:left;*/
    width:5rem;
  }
  .left-menu li{
    width:100%;
    height:2.4rem;
    line-height:2.4rem;
    background:#f9f9f9;
    box-shadow:0 1px 0 0 #eeeeee, inset -1px 0 0 0 #eeeeee;
    font-size:14px;
    color:#222222;
    text-align:center;
    border-bottom:1px solid #efefef;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  .left-menu li:last-child{
    border-bottom:none
  }
  .left-menu li.active{
    color:#e93b3d;
    background:none;
  }
  .r-main{
    height:100%;
    flex:1;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .paixu{
    width:100%;
    overflow:hidden;
  }
  .paixu li{
    float:left;
    width:50%;
    height:2.4rem;
    line-height:2.4rem;
    text-align:center;
    font-size:.6rem;
    color:#777777;
    border-bottom:1px solid #efefef;
  }
  .paixu li:first-child{
    border-right:1px solid #efefef;
  }
  .icon-px{
    padding:0 5px;
  }
  .sort-con{
    background:#fff;
    padding:0.5rem;
    overflow:hidden;
  }
  .sort-con li{
    overflow:hidden;
    border-bottom:1px solid #efefef;
    margin-bottom:.5rem;
    padding:.5rem 0;
    display:flex;
  }
  .left-img{
    width:4rem;
    height:4rem;
    overflow:hidden;
  }
  .left-img img{
    width:100%;
  }
  .pro-desc{
    flex:1;
  }
  .pro-desc h2{
    font-size:.7rem;
    color:#555;
    font-weight:normal;
  }
  .rule{
    display:inline-block;
    padding:.1rem .4rem;
    font-size:.5rem;
    color:#8a8a8a;
    background:#ffffff;
    border:1px solid #dedede;
    border-radius:2px;
  }
  .price{
    font-size:.7rem;
    color:#f74c4e;
  }
  del{
    font-size:.5rem;
    color:#8a8a8a;
  }
  .pt10{ padding-top:.5rem; }
  .mr5{ margin-right:.25rem; }
</style>
